<template>
    <!--用户管理-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.importUser')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <!-- 批次号 -->
                        <el-form-item prop="batchCode">
                            <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="importDate" label=""><!--导入时间-->
                            <el-date-picker
                                    v-model="form.importDate"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :start-placeholder="$t('salesManage.timeStartImport')"
                                    :end-placeholder="$t('salesManage.timeEndImport')"
                                    :default-time="['00:00:00', '23:59:59']"
                                    class="el-select"
                                    style="width:100%;"
                                    clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <!--状态-->
                        <el-form-item prop="currentStatus">
                            <el-select v-model="form.currentStatus" :placeholder="$t('common.status')" clearable style="width: 100%">
                                <el-option v-for="opt in statusList" :label="opt.label" :key="opt.label" :value="opt.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--营销类型-->
                    <el-col :span="4">
                        <el-form-item prop="marketingType">
                            <el-select v-model="form.marketingType" :placeholder="$t('salesManage.marketingType')"
                                       style="width: 100%"><!--营销类型-->
                                <el-option v-for="item in keyMap.marketingType()" :key="item.value"
                                           :value="item.value" :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--所属APP-->
                    <el-col :span="4">
                        <el-form-item prop="appName">
                            <select-app-list v-model="form.appName"
                                             :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="importUser" type="primary">{{ $t('salesManage.importUser') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :max-height="tableMaxHeight" :data="tableData" style="width: 100%;">
                        <!-- 编号 -->
<!--                        <el-table-column prop="importCode" :label="$t('common.numbering')" min-width="110"></el-table-column>-->
                        <!-- 批次号 -->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')" min-width="120"></el-table-column>
<!--                        &lt;!&ndash; 文件名 &ndash;&gt;
                        <el-table-column prop="fileName" :label="$t('salesManage.fileName')" min-width="170"></el-table-column>-->
                        <!--所属APP-->
                        <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <!--营销类型-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
                        <!-- 用户数 -->
                        <el-table-column prop="userNum" :label="$t('salesManage.numberUser')" min-width="80"></el-table-column>
                        <!-- 待分配数 -->
                        <el-table-column prop="waitNum" :label="$t('salesManage.tobeAllocated')" min-width="120"></el-table-column>
                        <!-- 导入时间 -->
                        <el-table-column prop="createTime" :label="$t('salesManage.timeImport')" min-width="180">
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!-- 导入备注 -->
                        <el-table-column prop="remark" :label="$t('common.importRemark')" min-width="100" :show-overflow-tooltip="true" >
                            <template slot-scope="{ row }">{{!row.remark?'--':row.remark}}</template>
                        </el-table-column>
                        <!-- 状态 -->
                        <el-table-column prop="currentStatus" :label="$t('common.status')" min-width="120">
                            <template slot-scope="scope">{{ scope.row.currentStatus | currentStatus }}</template>
                        </el-table-column>
                        <!-- 操作 -->
                        <el-table-column prop="waitHandleCount" :label="$t('common.operation')" :min-width="language === 'zh' ? 150 : 200">
                            <template slot-scope="{ row }">
                                <!-- 0 待分配  1 已分配  2 已回收 -->
                                <!-- 话述模板选择 -->
<!--                                <el-button type="text" @click="wordTemplateSelect(row)" >{{$t('salesManage.choiceWord')}}</el-button>-->
                                <!-- 编辑话术 -->
                                <!-- <el-button type="text" @click="editingSpeech(row)" >{{$t('salesManage.speechEditing')}}</el-button> -->
                                <!-- 分配 -->
                                <el-button type="text" @click="distribution(row)" :disabled="row.currentStatus==2||row.currentStatus==1" >{{$t('salesManage.distribute')}}</el-button>
                                <!-- <el-button type="text" @click="distribution(row)" :disabled="row.currentStatus==2||row.currentStatus==1">{{$t('collection.distribute')}}</el-button> -->
                                <!-- 回收 -->
                                <el-button type="text" @click="recycling(row)" :disabled="row.currentStatus==2||row.currentStatus==0">{{$t('salesManage.recycling')}}</el-button>
                                <!-- 导出话述 -->
<!--                                <el-button type="text" @click="exportStatement(row)">{{$t('salesManage.statementExport')}}</el-button>-->
                            </template>
                        </el-table-column>
                        <!--优惠券-->
                        <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="180">
                            <template slot-scope="{ row }">
                                <a v-if="row.couponUrl" @click="handleChangeCoupon(row)" href="javascript:void(0);">{{ row.couponUrl }}</a>
                                <a v-else-if="row.marketingType=='1'" @click="handleChangeCoupon(row)">--</a>
                                <span v-else>--</span>
                            </template>
                        </el-table-column><!--优惠券-->
                    </el-table>
                    <!-- 分页组件 -->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

        <!-- 话述模板选择start -->
        <alert-dialog :title="$t('salesManage.wordTemplateSelect')" :visible.sync="alertDialogVisible.wordTemplateSelect" width="500px">
            <div>
                <el-form :model="wordTemplateSelectF" :rules="wordTemplateRule" ref="wordTemplateSelectF" class="demo-ruleForm">
                    <p style="margin-left:20px;font-size:16px;">{{ $t('salesManage.templateBatchTips') }}</p>
                    <el-form-item label="" label-width="20px" prop="questionnaireId">
                        <el-radio-group v-model="wordTemplateSelectF.questionnaireId">
                            <ul class="radio-list">
                                <li v-for="item in templateList" :key="item.id">
                                    <el-radio :label="item.id"><p class="label-word-break">{{ item.name }}</p></el-radio>
                                </li>
                            </ul>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="alertDialogVisible.wordTemplateSelect = false">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="submtWordTemplate">{{$t('common.submit')}}</el-button>
            </span>
        </alert-dialog>
        <!-- 话述模板选择弹窗end -->

        <!-- 用户导入弹窗start -->
        <el-dialog :title="this.$t('salesManage.importUser')" :visible.sync="alertDialogVisible.importUser" width="460px">
            <el-form :model="importUserForm" :rules="importUserFormRules" ref="importUserForm">
<!--                <el-form-item :label="$t('common.numbering')+':'" :label-width="formLabelWidth" >{{importUserForm.importCode}}</el-form-item>-->
                <!--批次号-->
                <el-form-item :label="$t('salesManage.batchNumber')+':'" :label-width="formLabelWidth" prop="batchCode">
                    <el-input v-model="importUserForm.batchCode" auto-complete="off" :placeholder="$t('salesManage.batchNumberRule')"></el-input>
                </el-form-item>
                <!--文件导入-->
                <el-form-item :label="$t('salesManage.file')+':'" :label-width="formLabelWidth" prop="file">
                    <p>
                        <label for="fileImportUser"  class="el-button el-button--primary el-button--small">
                            <span>{{$t('salesManage.uploadClick')}}</span>
                            <input ref="excelImportUser" title=" " type="file" @change="addFile" id="fileImportUser" style="display:none;" />
                        </label>
                        <span class="el-upload__tip" slot="tip" style="margin-left:10px;">
                            <a href="/phone.xls">{{$t('salesManage.userManage.downloadImportModel')}}</a>
                        </span><!--点击下载导入模板-->
                    </p>
                    <p v-if="fileNameList!==''">{{fileNameList}}</p>
                </el-form-item>
                <!--是否入库-->
                <el-form-item :label="$t('salesManage.storage')+':'" :label-width="formLabelWidth" prop="isSyncSale">
                    <el-radio-group v-model="importUserForm.isSyncSale">
                        <el-radio :label="1" >{{$t('common.yes')}}</el-radio>
                        <el-radio :label="0">{{$t('common.no')}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!--优惠券-->
                <el-form-item :label="$t('common.coupons')+':'" :label-width="formLabelWidth" prop="couponUrl">
                    <el-input v-model="importUserForm.couponUrl" auto-complete="off" :placeholder="$t('common.coupons')"></el-input>
                </el-form-item>
                <!--所属APP-->
                <el-form-item prop="appName" :label="$t('common.ownedApp')+':'" :label-width="formLabelWidth">
                    <select-app-list v-model="importUserForm.appName"
                                     multiple
                                     :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                </el-form-item>
                <!--模板-->
                <el-form-item prop="templateId" message='verify.plsChoose' :required="showRobotScriptTemplate"  :label="''" :label-width="formLabelWidth">
                <el-select v-model="importUserForm.templateId"  :disabled="!showRobotScriptTemplate" :placeholder="$t('salesManage.chooseRobotTemplate')" clearable style="width: 100%">
                    <el-option v-for="opt in robotTemplate" :label="opt.name" :key="opt.workflow_template_id" :value="opt.workflow_template_id"></el-option>
                    </el-select>
                </el-form-item>
                <!--导入备注-->
                <el-form-item :label="$t('common.remark')+':'"  :label-width="formLabelWidth" prop="remark">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="$t('verify.underXWords',{x: 200})" v-model="importUserForm.remark" :maxlength="200">
                    </el-input>
                </el-form-item>
                <p style="color:red;padding-left: 72px;">*{{$t('salesManage.tipsImportUser')}} </p>
                <p v-show="showRobotScriptTemplate" style="color:red;padding-left: 72px;">*{{$t('salesManage.onlyEnterOne')}} </p>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="alertDialogVisible.importUser = false">{{ $t('common.cancel') }}</el-button>
                <el-button type="primary"  @click="submitIUser">{{$t('salesManage.import')}}</el-button>
            </div>
        </el-dialog>
        <!-- 用户导入弹窗end -->

        <!-- 用户分配start -->
        <alert-dialog :title="this.$t('salesManage.assignmentUser')" :visible.sync="alertDialogVisible.assignmentUser" width="460px">
            <el-form :model="assignmentUserForm" :rules="assignmentUserFormRule" ref="assignmentUserForm" size="mini">
                <p style="font-size:16px;margin-bottom:18px;">{{ $t('salesManage.titleAssignmentUser') }}</p>
                <el-form-item label="" prop="checkList">
                    <el-checkbox-group v-model="assignmentUserForm.checkList">
                        <el-row v-for="item in telSalesList" :key="item.userId">
                            <el-col :span="18">
                                <el-checkbox :label="item.userId" >{{item.userName}}({{ item.num }})</el-checkbox>
                            </el-col>
                            <el-col class="" :span="6">
                                <el-input v-model="item.numInput" :disabled="telSalesChecked(item.userId)"></el-input>
                            </el-col>
                        </el-row>
                    </el-checkbox-group>
                </el-form-item>
                <!--<p style="color:red;">*{{$t('salesManage.tipsAssignmentUser')}} </p>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="alertDialogVisible.assignmentUser = false">{{ $t('common.cancel') }}</el-button>
                <el-button type="primary"  @click="submitAssignUser">{{$t('common.submit')}}</el-button>
            </div>
        </alert-dialog>
        <!-- 用户分配end -->

    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
    .label-word-break {
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
        vertical-align: text-top;
        display: inline-block;
        line-height: 1.5;
    }
    .search-input {
        width: 100%;
    }

    // 编辑话术弹窗
    .editingStatement {
        max-height: 500px;
        overflow: auto;
        .editingStatementBlock {
            background-color: #f0f0f0;
            position: relative;
            padding: 20px 0 0;
            margin: 10px auto;
            position: relative;
        }
    }

    .el-button + .el-button {
        margin-left: 10px;
    }

    .icon-add, .icon-delete, icon-close {
        font-size: 28px;
        margin-left: 5px;
        cursor: pointer;
    }

    .icon-add {
        color: #52a0db;
    }

    .icon-delete {
        color: #ff0000;
    }

    .icon-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .radio-list li {
        margin: 10px auto;
    }

    // .mr5{margin-right: 15px;}
</style>
<style lang="scss">
    [data-page=telemarketing-userManage] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-button {
            margin-bottom: 18px
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
    }
</style>

